<template>
<div style="padding:30px">
    <el-alert
        title="用户权限管理"
        type="info"
        :closable="false"
        show-icon
        description="这里是admin对用户权限的一个管理界面,处于简单尝试阶段"
        effect="dark"/>
    <div class="app-container">
        <el-input v-model="userName" placeholder="搜索用户" style="width: 200px;" class="filter-item" />
        <el-button @click="handleQueryUser" type="primary">搜索</el-button>
        <el-table
        :data="userData"
        v-loading="listLoading"
        border
        fit
        highlight-current-row>
        <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
        <el-table-column align="center" label="用户名" prop="username">
        </el-table-column>
        <el-table-column label="统计信息查看权限">
            <template slot-scope="scope">
                <el-switch
                v-model="scope.row.role"
                active-value="user1"
                inactive-value="user"
                @click.native.prevent="handleUser1(scope.row)"
                >
                </el-switch>
            </template>
        </el-table-column>
        </el-table>
    </div>
</div>
</template>

<script>
import { queryAllUser,editPower,querySingleUser } from '@/api/user';

export default{
    name:"Power",
    data(){
        return{
            userData:[],
            options:[],
            userName:null,
            listLoading:true,
        }
    },
    mounted(){
        queryAllUser().then(response=>{
            this.listLoading=false
            this.userData=response.data.data
            this.userData.splice(0,1)
        })
    },
    methods:{
        handleQueryUser(){
            this.listLoading=true
            if(this.userName!=''){
                querySingleUser({username:this.userName}).then(response =>{
                    
                    this.userData=response.data.data
                    this.listLoading=false
                    this.$notify({
                    title: '成功',
                    message: '查询成功',
                    type: 'success'
                    });
                })
            }
            else{
                queryAllUser().then(response =>{
                    this.userData=response.data.data
                    this.userData.splice(0,1)
                    this.listLoading=false
                })
            }
        },
        handleUser1(user){
            if(user.role==='user1'){
                editPower({user_id:user.id,user_role:'user1'}).then(response=>{
                this.$notify({
                title: '成功',
                message: '现在用户'+user.username+'可以查看统计信息了！',
                type: 'success'
                });
            })}
            else if(user.role ==='user'){
                editPower({user_id:user.id,user_role:'user'}).then(response=>{
                this.$notify({
                title: '成功',
                message: '现在用户'+user.username+'不能查看统计信息了！',
                type: 'success'
                });
                })
                }
                },
    }
}
</script>
<style>

</style>